import React, {useEffect, useState} from 'react';
import type {RadioChangeEvent} from 'antd';
import {Form, Input, InputNumber, message, Modal, Radio, TreeSelect} from 'antd';
import type {MenuListItem} from "../data";
import TextArea from "antd/es/input/TextArea";
import {queryMenuList} from "@/pages/system/MenuList/service";
import {tree} from "@/utils/utils";

interface CreateMenuFormProps {
  open: boolean;
  onCreate: (values: MenuListItem) => void;
  onCancel: () => void;
}

const CreateMenuForm: React.FC<CreateMenuFormProps> = ({open, onCreate, onCancel}) => {
  const [menuType, setMenuType] = useState<number>(2);
  const [menuName, setMenuName] = useState<string>('菜单名称');
  const [menuListItems, setMenuListItems] = useState<MenuListItem[]>([]);

  const [form] = Form.useForm();
  const FormItem = Form.Item;

  useEffect(() => {
    if (open) {
      queryMenuList().then((res) => {
        setMenuListItems(tree(res.data, 0, 'parentId'))

      });
    }
  }, [open]);

  const handleOk = () => {
    form.validateFields()
      .then((values) => {
        onCreate({"api_url": '', "menu_url": '', "icon": '', ...values});
        form.resetFields();
      })
      .catch((info) => {
        message.error(info);
      });
  }

  const onChange = (e: RadioChangeEvent) => {
    const t = e.target.value
    setMenuType(t)
    if (t === 1) {
      setMenuName('目录名称');
    } else {
      setMenuName(t === 2 ? '菜单名称' : '按钮名称');
    }
  };

  const userFormContent = () => {
    return (
      <>
        <FormItem
          label="类型"
          name="menuType"
        >
          <Radio.Group onChange={onChange}>
            <Radio value={1}>目录</Radio>
            <Radio value={2}>菜单</Radio>
            <Radio value={3}>按钮</Radio>
          </Radio.Group>
        </FormItem>
        {menuType !== 1 && <FormItem
          label="上级"
          name="parentId">
          <TreeSelect
            style={{width: '100%'}}
            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
            treeData={menuListItems}
            placeholder="请选择上级"
            fieldNames={{label: 'menuName', value: 'id', children: 'children'}}
            allowClear
          />
        </FormItem>
        }
        <FormItem
          label={menuName}
          name="menuName"
          rules={[{required: true, message: '请输入菜单名称!'}]}
        >
          <Input/>
        </FormItem>
        {menuType !== 3 &&
          <FormItem
            label="路径"
            name="menuUrl"
            rules={[{required: true, message: '请输入路径!'}]}
          >
            <Input/>
          </FormItem>
        }
        {menuType === 3 &&
          <FormItem
            label="接口地址"
            name="apiUrl"
            rules={[{required: true, message: '请输入接口地址!'}]}
          >
            <Input/>
          </FormItem>
        }
        <FormItem
          label="排序"
          name="sort"
          rules={[{required: true, message: '请输入排序!'}]}>
          <InputNumber/>
        </FormItem>
        {menuType !== 3 &&
          <FormItem
            label="图标"
            name="menuIcon"
            rules={[{required: true, message: '请输入图标!'}]}
          >
            <Input/>
          </FormItem>
        }
        <FormItem
          label="状态"
          name="statusId"
          rules={[{required: true, message: '请输入状态!'}]}>
          <Radio.Group>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="备注"
          name="remark"
          initialValue={''}
        >
          <TextArea rows={2}/>
        </FormItem>
      </>
    )
  }

  const modalFooter = {title: "新建", okText: '保存', onOk: handleOk, onCancel, cancelText: '取消', open, width: 480};
  const formLayout = {labelCol: {span: 7}, wrapperCol: {span: 13}, form, initialValues: {"sort": 1, "statusId": 1, "menuType": 2, "menuIcon": "Setting",}};

  return (
    <Modal {...modalFooter} style={{top: 150}}>
      <Form {...formLayout} style={{marginTop: 30}}>
        {userFormContent()}
      </Form>
    </Modal>
  );
};

export default CreateMenuForm;
